<template>
  <div class="myContainer">
    <el-tabs type="border-card">
      <el-tab-pane label="工单基础信息">
        <el-row class="myBorderBottom">
          <el-col :span="3" class="myTitleText myLineHeight_40px">工单基本信息</el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            工单ID :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="工单ID" :readonly="disabled" v-model="id"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            当前状态 :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="当前状态" :readonly="disabled" v-model="affair_status"></el-input>
          </el-col>
          <el-col :span="3" class="myLeftMsg">
            是否逾期 :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="是否逾期" :readonly="disabled" v-model="istimeout"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            所属小区 :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="所属小区" v-model="areaid" :readonly="disabled"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            工单来源 :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="工单来源" :readonly="disabled" v-model="commit_type"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            上报时间 :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="上报时间" :readonly="disabled" v-model="commit_time"></el-input>
          </el-col>
        </el-row>
        <el-row class="myBorderBottom">
          <el-col :span="3" class="myTitleText myLineHeight_40px">工单相关人员信息</el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            报事人 :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="报事人" :readonly="disabled" v-model="commituser_name"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            报事人类型 :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="报事人类型" :readonly="disabled" v-model="commituser_type"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            联系电话 :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="联系电话" :readonly="disabled" v-model="phone"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            联系地址 :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="联系地址" :readonly="disabled" v-model="address"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            责任人 :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="责任人" :readonly="disabled" v-model="chargeuser_name"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            联系电话 :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="联系电话" :readonly="disabled" v-model="chargeuser_phone"></el-input>
          </el-col>
        </el-row>
        <el-row class="myBorderBottom">
          <el-col :span="3" class="myTitleText myLineHeight_40px">报事事件信息</el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            报事类型 :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="报事类型类别" :readonly="disabled" v-model="type_name"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            问题描述 :
          </el-col>
          <el-col :span="15">
            <el-input type="textarea" placeholder="问题描述" v-model="note" :readonly="disabled"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            图片信息 :
          </el-col>
          <el-col :span="15">
            <img v-for="x in affair_attachments" v-if="x.source_type==1" :src=x.url alt="图片丢失" width="300" style="margin-right: 10px" />
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="15" :offset="3">
            <el-button type="primary" class="myBgGreen" @click="onClose">关 闭</el-button>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="预处理及指派">
        <el-row class="myBorderBottom">
          <el-col :span="3" class="myTitleText myLineHeight_40px">预处理信息</el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            责任人 :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="责任人" :readonly="disabled" v-model="chargeuser_name"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            联系电话 :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="联系电话" :readonly="disabled" v-model="chargeuser_phone"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            操作时间 :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="操作时间" :readonly="disabled" v-model="commit_time"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            <span class="require myVA_M">*</span>
            处理等级 :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="处理等级" :readonly="disabled" v-model="level"></el-input>
            <!-- <template>
              <el-select v-model="rankValue" placeholder="处理等级">
                <el-option
                  v-for="item in rankOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </template> -->
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            <span class="require myVA_M">*</span>
            处理截止日期 :
          </el-col>
          <el-col :span="6">
            <el-date-picker
              :readonly="disabled"
              v-model="endtime"
              type="date"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="截止日期">
            </el-date-picker>
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            处理意见 :
          </el-col>
          <el-col :span="16">
            <el-input type="textarea" v-model="deal_suggestion" :readonly="disabled"></el-input>
          </el-col>
        </el-row>
        <el-row class="myBorderBottom">
          <el-col :span="3" class="myTitleText myLineHeight_40px">指派信息</el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            <span class="require myVA_M">*</span>
            处理人 :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="处理人" :readonly="disabled" v-model="dealuser_name"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            <span class="require myVA_M">*</span>
            联系电话 :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="联系电话" :readonly="disabled" v-model="dealuser_phone"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="6" :offset="3">
            <!-- <el-button type="primary" class="myBgGreen">保 存</el-button> -->
            <el-button type="primary" class="myBgGreen" @click="onClose">关 闭</el-button>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="处理">
        <el-row class="myBorderBottom">
          <el-col :span="3" class="myTitleText myLineHeight_40px">处理人员信息</el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            处理人 :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="处理人" :readonly="disabled" v-model="dealuser_name"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            联系电话 :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="联系电话" :readonly="disabled" v-model="dealuser_phone"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            操作时间 :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="操作时间" :readonly="disabled" v-model="complete_time"></el-input>
          </el-col>
        </el-row>
        <el-row class="myBorderBottom">
          <el-col :span="3" class="myTitleText myLineHeight_40px">处理信息</el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            处理结论 :
          </el-col>
          <el-col :span="6" class="myLineHeight_45px">
            <template>
              <el-radio-group v-model="isdealed" :disabled=true>
                <el-radio :label="0">已处理</el-radio>
                <el-radio :label="1">无法处理</el-radio>
                <el-radio :label="2">情况不属实</el-radio>
              </el-radio-group>
            </template>
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            问题描述 :
          </el-col>
          <el-col :span="16">
            <el-input type="textarea" placeholder="问题描述" :readonly="disabled" v-model="deal_result"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px my">
          <el-col :span="3" class="myLeftMsg">
            图片信息 :
          </el-col>
          <el-col :span="16">
            <img  v-for="x in deal_attachments" v-if="x.source_type==1" :src=x.url alt="图片丢失" width="300" style="margin-right: 10px" />
            <!-- <el-upload
              action="url"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible" size="tiny">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog> -->
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="6" :offset="3">
            <!-- <el-button type="primary" class="myBgGreen">保 存</el-button> -->
            <el-button type="primary" class="myBgGreen" @click="onClose">关 闭</el-button>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="用户评价">
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            评价状态 :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="评价状态" :readonly="disabled" v-model="isEvaluate"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            评价时间 :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="评价时间" :readonly="disabled" v-model="timestamp"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            评价星级 :
          </el-col>
          <el-col :span="6">
            <el-rate
              :disabled="disabled"
              v-model="score"
              show-score 
              class="mymarginTop_10px"
              text-color="#ff9900"
              score-template="{value}分">
            </el-rate>
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            评价信息 :
          </el-col>
          <el-col :span="16">
            <el-input type="textarea" placeholder="评价信息" :readonly="disabled" v-model="user_evaluation"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="6" :offset="3">
            <el-button type="primary" class="myBgGreen" @click="onClose">关 闭</el-button>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="回访/归档">
        <el-row class="myBorderBottom">
          <el-col :span="3" class="myTitleText myLineHeight_40px">回访信息</el-col>
        </el-row>
        <!-- <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            回访人 :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="回访人" :disabled="disabled"></el-input>
          </el-col>
        </el-row> -->
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            回访时间 :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="回访时间" :readonly="disabled" v-model="reviewTimestamp"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            回访信息 :
          </el-col>
          <el-col :span="16">
            <el-input type="textarea" placeholder="回访信息" :readonly="disabled" v-model="review_note"></el-input>
          </el-col>
        </el-row>
        <el-row class="myBorderBottom">
          <el-col :span="3" class="myTitleText myLineHeight_40px">归档信息</el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            是否重新处理 :
          </el-col>
          <el-col :span="6">
            <el-button type="primary" class="myBgGreen" v-if="affair_status_num==5" @click="againDialogVisible = true">重新处理</el-button>
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="6" :offset="3">
            <el-button type="primary" class="myBgGreen" @click="onClose">关 闭</el-button>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>


    <!--指派执行人员弹出框 start-->
    <el-dialog title="指派执行人员" class="myRoleDialog" :visible.sync="newExecutorDialogVisible">
      <div class="mymarginTop_10px myOV_y_400px">
        <el-tree
          show-checkbox>
        </el-tree>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" class="myBgGreen" @click="newExecutorDialogVisible = false">取 消</el-button>
        <el-button type="primary" class="myBgGreen">提 交</el-button>
      </div>
    </el-dialog>
    <!--指派执行人员弹出框 end-->

    <!--重新处理弹出框 start-->
    <el-dialog title="警告" class="myRoleDialog" :visible.sync="againDialogVisible">
      <div class="mymarginTop_10px myOV_y_400px">
        是否将工单号为 {{id}} 的 {{type_name}} 发回重新处理！！！
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" class="myBgGreen" @click="againDialogVisible = false">取 消</el-button>
        <el-button type="primary" class="myBgGreen" @click="onReDo">确 定</el-button>
      </div>
    </el-dialog>
    <!--重新处理弹出框 end-->
  </div>
</template>  

<style scoped>
  .myContainer{
    background: #fff;
    padding: 10px;
  }
  .myHeadeTitle{
    color: #000;
    font-weight: 500;
    font-size: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #dbdbdb;
    margin-bottom:10px; 
  }
  .myHeadeTitle:before,.myHeadeTitle:after{
    content: " ";
    display: block;
    clear: both;
  }
  .myBgGreen{
    background: #00c2a9;
    border-color: #00c2a9;
    color: #fff;
    margin-top: 2px;
  }
  .myLineHeight_35px{
    line-height: 35px;
  }
  .myTextAlignRight{
    text-align: right;
  }
  .myBgGreen:hover{
    background: #33ceba;
  }
  .myPaddingTop_10px{
    padding-top: 10px;
  }  
  .myLeftMsg{
    line-height: 40px;
    text-align: right;
    padding-right: 10px;
  }
  .myPaddingBottom_10px{
    padding-bottom: 10px;
  }
  .myVA_M{
    vertical-align: middle;
  }
  .myPadding_20px{
    padding: 20px;
  }    
  .myTitleText{
    font-weight: 500;
    font-size: 16px;
  }
  .myLineHeight_40px{
    line-height: 40px;
  }
  .myBorderBottom{
    border-bottom:1px solid #dbdbdb;
  }
  .mymarginTop_10px{
    padding-top: 10px;
  }
  .myLineHeight_45px{
    line-height: 45px;
  }
</style>
  
<script>
  import { getPostItDetail , affairStatus , istimeout , sourceOfEvents , level , dispatchType , evaluateType , redo } from "@/api/affair_setting";
  export default {
     data(){
      return{
        disabled:true,
        rankValue:"",
        rankOptions:[],
        date1:"",
        newExecutorDialogVisible:false,
        radio:"",
        dialogImageUrl: '',
        dialogVisible: false,
        value1:4,
        againDialogVisible:false,
        id:"",
        affair_status:"",
        areaid:"",
        istimeout:"",
        commit_type:"",
        commit_time:"",
        commituser_name:"",
        phone:"",
        address:"",
        subject_name:"",
        note:"",
        affair_attachments:[],
        chargeuser_id:"",
        complete_time:"",
        dispatch_time:"",
        level:"",
        endtime:"",
        affnote:"",
        dispatch_type:"",
        dealuser_name:"",
        dealuser_phone:"",
        isdealed:"",
        deal_suggestion:"",
        deal_result:"",
        deal_attachments:[],
        type_name:"",
        timestamp:"",
        user_evaluation:"",
        isEvaluate:"",
        chargeuser_name:"",
        chargeuser_phone:"",
        commituser_type:"",
        score:0,
        reviewTimestamp:"",
        review_note:"",
        affair_status_num:""
      }
    },
    components: {
    },
    filters: {
      
    },
    mounted(){
      document.title = '报事工单详情';
      this.id=this.$route.query.id;
      this.onGetPostItDetail();
    },
    methods:{
      onGetPostItDetail(){
        let vm=this;
        getPostItDetail(vm.id).then(response => {
          let res=response.data;
          vm.affair_status_num=res.affair_status;
          vm.affair_status=affairStatus[res.affair_status];//事务状态
          vm.areaid=res.area_name;//小区id
          vm.istimeout=istimeout[res.istimeout];//是否逾期
          vm.commit_type=sourceOfEvents[res.commit_type];//工单来源
          vm.commit_time=res.commit_time;//上报时间
          vm.commituser_name=res.commituser_name;//上报人
          vm.phone=res.phone;//上报人电话
          vm.address=res.address;//上报人地址
          vm.chargeuser_name=res.chargeuser_name;//责任人
          vm.subject_name=res.subject_name;//报修类别
          vm.note=res.note;//描述
          vm.affair_attachments=res.affair_attachments;//图片信息（基本信息）
          vm.chargeuser_id=res.affair_dispatch.chargeuser_id;//预处理人
          vm.complete_time=res.affair_dispatch.complete_time;//操作时间
          vm.level=level[res.affair_dispatch.level];//处理等级
          vm.endtime=res.affair_dispatch.endtime;//处理截止时间
          vm.affnote=res.affair_dispatch.note;//处理意见
          vm.dispatch_type=dispatchType[res.affair_dispatch.dispatch_type];//派遣方式
          vm.dispatch_time=res.affair_dispatch.dispatch_time;//工单获取时间
          vm.dealuser_name=res.dealuser_name;//执行人
          vm.dealuser_phone=res.dealuser_phone;//执行人电话
          vm.isdealed=res.affair_dispatch.isdealed;//处理结论
          vm.deal_suggestion=res.affair_dispatch.deal_suggestion;//处理意见
          vm.deal_result=res.affair_dispatch.deal_result;//问题描述
          vm.deal_attachments=res.deal_attachments;
          vm.type_name=res.type_name;
          vm.isEvaluate=res.user_evaluation?"已评价":"未评价";
          if(res.user_evaluation){
            vm.timestamp=res.user_evaluation.timestamp;//评价时间
            vm.score=res.user_evaluation.score;//评级分数
            vm.user_evaluation=res.user_evaluation.user_evaluation;//评价信息
          }
          vm.chargeuser_phone=res.chargeuser_phone;//责任人电话
          vm.commituser_type=vm.Evaluate(res.commituser_type);//上报人类型
          if(res.user_review){
            vm.reviewTimestamp=res.user_review.timestamp;//回访时间
            vm.review_note=res.user_review.review_note;//回访信息
          }
          //console.log("拉取报事详情成功",res);
        }).catch(error => {
          //console.log("拉取报事详情失败",error);
        })
      },
      handleRemove(file, fileList) {
        //console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      onClose(){
        //this.$router.go(-1);
        let vm=this;
        let params={
          time:vm.$route.query.time||[],
          keyword:vm.$route.query.keyword||'',
          page_num:vm.$route.query.page_num||1,
          status:vm.$route.query.status||'',
          areaid:vm.$route.query.areaid||''
        }
        window.localStorage.setItem('backData',JSON.stringify(params));
        vm.$router.go(-1);
      },
      Evaluate:function(val){
        return evaluateType[val];
      },
      onReDo(){
        let vm=this;
        let params={
          type:2,
          affair_id:vm.id
        }
        redo(params).then(response => {
          let res=response.data;
          vm.$message.success("执行成功！");
          vm.onGetPostItDetail();
          vm.againDialogVisible=false;
          //console.log(res)
        }).catch(error => {
          vm.$message.error("执行失败！")
          //console.log(error)
        })
      }
    }

  }

</script>  



